<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>癌症数据可视化大屏展示</title>
    <link
      rel="stylesheet"
      href="css/index.css" />
    <script src="js/myMap.js"></script>
  </head>

  <body>
    <header>
      <h1>中国癌症数据可视化展示</h1>
      <div class="showTime">
        更新时间：
        <span></span>
      </div>
    </header>
    <section class="mainbox">
      <div class="column">
        <div class="panel bar">
          <h2>癌症患者年龄分布</h2>
          <!-- 添加按钮 -->
          <button id="load-more-btn">加载60岁以上数据</button>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line">
          <h2>多年来不同癌症确诊病例数量趋势</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
          <h2>2022年中国癌症患者性别比例分布</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="column">
        <div class="no">
          <div class="no-hd">
            <ul>
              <li>4824700</li>
              <li>21.42%</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>中国患癌死亡人数（2022年）</li>
              <li>中国人群患癌概率（0-74岁）</li>
            </ul>
          </div>
        </div>
        <div class="map">
          <div class="chart"></div>
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
        </div>
      </div>
      <div class="column">
        <div class="panel bar1">
          <h2>中国各省2014-2023年平均每年癌症发病率</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel line1">
          <h2>癌症类型患者各阶段数量分布</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
        <div class="panel pie1">
          <h2>癌症患者肿瘤类型分布比例</h2>
          <div class="chart"></div>
          <div class="panel-footer"></div>
        </div>
      </div>
    </section>

    <script src="js/flexible.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/china.js"></script>
    <script src="js/myMap.js"></script>

    <script>
      ;(function (fn) {
        fn()
        setInterval(fn, 1000)
      })(function () {
        var dt = new Date()
        var year = dt.getFullYear()
        var month = dt.getMonth() + 1
        var date = dt.getDate()
        var hours = dt.getHours()
        var minutes = dt.getMinutes()
        var seconds = dt.getSeconds()

        // 补零函数
        function addZero(num) {
          return num < 10 ? '0' + num : num
        }

        document.querySelector('.showTime span').innerHTML =
          year +
          '年' +
          addZero(month) +
          '月' +
          addZero(date) +
          '日 ' +
          addZero(hours) +
          ':' +
          addZero(minutes) +
          ':' +
          addZero(seconds)
      })
    </script>
  </body>
</html>